<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h1>Todo List</h1>
        <input type="text" v-model="thing" @keyup.enter="add">
        <button @click="add">add</button>
        <p>待完成</p>
        <ul>
            <li v-for="(todo,index) in todoList" :key="index">
                {{index+1}}. {{todo.thing}}
                <button @click="del(index)">del</button>
            </li>
        </ul>
        <p>已完成</p>
        <ul>
            <li v-for="(done,index) in doneList" :key="'done'+index">
                {{index+1}}. {{done.thing}}
            </li>
        </ul>
    </div>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            // 初始化
            data: {
                // 用户输入的内容
                thing: '',
                // 待办事项---保证数据类型是数组
                todoList: JSON.parse(localStorage.getItem('todoList')) || [],
                // 已完成事项
                doneList: JSON.parse(localStorage.getItem('doneList')) || []
            },
            methods: {
                // 添加到待办事项
                add() {
                    // 判断 不为空时再添加
                    if(this.thing) {
                        this.todoList.push({thing: this.thing});
                    }
                    this.thing = '';
                    // 存入本地
                    localStorage.setItem('todoList', JSON.stringify(this.todoList));
                },
                // 完成某件事
                del(index){
                    // console.log(this.todoList[index]);
                    // 加入已完成事项
                    this.doneList.push(this.todoList[index]);
                    // 这里需要先添加后删除，为了防止数组的splice方法修改原数组后，index无法对应导致报错
                    // 通过下标删除指定项
                    this.todoList.splice(index, 1);
                    // 存入本地
                    localStorage.setItem('todoList', JSON.stringify(this.todoList));
                    localStorage.setItem('doneList', JSON.stringify(this.doneList));
                }
            }
        })
    </script>
</body>
</html>